<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版微信助手</title>
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./js/vue@3.5.13.js"></script>
    <!-- 导入axios.js插件 -->
    <Script src="./js/axios.js"></Script>
</head>

<body>
    <div id="app">
        <!-- 未登录区域 -->
      
        <div class="wx-container" v-if="!isLogin">
            <h1>使用文件传输助手，手机电 脑轻松互传文件。</h1>
            <!-- 按钮登录 -->
            <div class="box" v-show="loginType===0">
                <!-- 添加 事件绑定指令 v-on：click -->
                <!-- v-on:click="loginType = 1"为点击事件，点击图片时跳转到 loginType = 1 的页面      click:为单击事件，dbclick:为双击事件-->
                <img class="change-btn" src="assets/二维码登录.png" alt="" v-on:click="loginType = 1">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <!-- onLogin()：是一个函数，点击按钮将跳转到这个函数定义的页面 -->
                    <button class="wx-login" v-on:click="onLogin()">点击登录</button>
                    <p>使用鼠标点击登录传输文件</p>
                </div>
            </div>

            <!-- 二维码登录 -->
            <div class="box" v-show="loginType===1">
                <!-- 添加 事件绑定指令 v-on：click -->
                <img class="change-btn" src="assets/账号登录.png" alt="" v-on:click="loginType = 0">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <img class="code-img" src="assets/code.png" alt="">
                    <p>使用手机微信扫码传输文件</p>
                </div>
            </div>
        </div>

        <!-- 已登录区域 -->
        <div class="wx-chat-box" v-else>
            <!-- 聊天头部区域 -->
            <div class="chat-header-main">
                <div>张三的文件传输助手（男）</div>
                <div class="chat-del">
                    <span class="del" @click="onLogout()">X</span>
                </div>
            </div>

            <!-- 聊天内容区域 -->
            <div class="chat-main-box">
                <!-- 当v-if="userInfo.chatList <= 0"时，聊天页面没有信息就显示下面那句话，如果有消息时就不显示 -->
                <div class="chat-main-info" v-if="userInfo.chatList.length <= 0">你可以使用「手机微信>文件传输助手」与电脑互传文件</div>
                <div class="chat-main-messages" ref="messageBox">
                    <div class="message-box" v-for="itme in userInfo.chatList" :key="itme.id">
                        <p class="message">{{ itme.content }}</p>
                        <img class="header" :src="userInfo.headerImg" alt="" />
                    </div>

                </div>
            </div>

            <!-- 聊天输入框区域 -->
            <div class="chat-input-box">
                <!-- textarea跟input用法一样，textarea是多行框     trim去空格的修饰符-->
                <textarea class="textarea" v-model.trim="msg" @keyup.enter="onSend()" name="" id="" cols="30"
                    rows="8"></textarea>
                <div>
                    <button class="chat-send" @click="onSend()">发送</button>
                </div>
            </div>
        </div>
    </div>

    <!-- vue -->
    <script>

        console.log(axios);
        const {
            createApp,
            nextTick,
            ref
        } = Vue
        // 创建 Vue
        createApp({
            setup() {
                // 定义用户数据
                const userInfo = ref({
                    name: '张三',
                    gender: 0,
                    headerImg: 'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000',
                    chatList: [{
                        id: "1",
                        content: "Hello Html"
                    }, {
                        id: "2",
                        content: "Hello JavaScript"
                    }, {
                        id: "3",
                        content: "Hello Vue"
                    },]
                })

                // 编写逻辑代码
                let isLogin = ref(false) 
               
                let loginType = ref(0) 


                // 声明消息变量
                let msg = ref("")

                //声明一个消息父盒子
                let messageBox = ref(null)

               
                const scrollToBottom = () => {
                    //DOM 更新之后执行
                    nextTick(() => {
                        //逻辑：messageBox是否有消息
                        if (messageBox.value) {
                            messageBox.value.scrollTo({
                                //滚动监听事件
                                top: messageBox.value.scrollHeight,
                                behavior: 'smooth'
                            })

                        }
                    })

                }




                //调用滚动函数
                scrollToBottom()


                //声明机器人函数
                const robotMessage = () => {
                    // console.log("机器人");


                    //方法二：
                    axios({
                        //请求的网址
                        url: "https://api.sizhi.com/chat?appid=4d5d15da10ae45a185b8d60be40be02f&userid=boot&spoken=" + msg.value,
                        //请求的方式
                        method: "get"
                    }).then(res => {         //请求成功的方法
                        console.log(res.data.data.info.text);

                        //定义一个消息对象
                        let obj = {
                            id: new Date(),
                            content: res.data.data.info.text
                        }
                        //向聊天数据追加消息
                        userInfo.value.chatList.push(obj)
                        //调用滚动函数
                        scrollToBottom()

                        
                        localStorage.setItem("chatList", JSON.stringify(userInfo.value.chatList))

                    }).catch(err => {         //请求失败的方法
                        console.log("请求失败", err);

                    })

                }





                //发送事件
                let onSend = () => {
                    if (msg.value.length === 0) {
                        alert("消息不能为空")
                        return       //return:如果上面if成立，则下面obj那些不能执行

                    }
                    //逻辑
                    let obj = {
                        id: new Date(),
                        content: msg.value
                    }
                    //追加
                    userInfo.value.chatList.push(obj)

                    //调用滚动函数
                    scrollToBottom()

                   
                    localStorage.setItem("chatList", JSON.stringify(userInfo.value.chatList))


                    //调用机器人函数
                    robotMessage()

                    //清空
                    msg.value = ""
                }

                
                isLogin.value = localStorage.getItem("isLogin")

                
                userInfo.value.chatList = JSON.parse(localStorage.getItem("chatList")) || []

                let onLogin = () => {
                    // let onLogin = function(){}
                  
                    isLogin.value = true 
                    //弹窗
                    alert("登录成功！")
                    //存储登录状态:名字，值        localStorage.setItem：存储数据
                    localStorage.setItem("isLogin", isLogin.value)
                }

                //定义函数：退出登录
                const onLogout = () => {
                    //逻辑：清空登录状态缓存,还要改变登陆状态
                    localStorage.removeItem("isLogin")
                    isLogin.value = false
                }

                // 返回值
                return {
                    userInfo,
                    isLogin,
                    loginType,
                    msg,
                    messageBox,
                    onLogin,
                    onSend,
                    onLogout
                }
            }
        }).mount('#app')
    </script>
</body>

</html>